<!DOCTYPE html>
<html>
    <head>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
        <div id="app" class="demo">

            <select @change="changeVal($event)" v-model="selOption">
                <template v-for="(site,index) in sites" :site="site" :index="index" :key="site.id">
                   <!-- 索引为 1 的设为默认值，索引值从0 开始-->
                   <option v-if = "index == 1" :value="site.name" selected>{{site.name}}</option>
                   <option v-else :value="site.name">{{site.name}}</option>
                </template>
             </select>
             <div>您选中了:{{selOption}}</div>
        </div>
        <script>
            const app = Vue.createApp({
                data(){
                    return {count:4,
                        selOption: "Runoob",
            sites: [
                  {id:1,name:"Google"},
                  {id:2,name:"Runoob"},
                  {id:3,name:"Taobao"},
            ]}
                },
                methods:{
                    increment(){
                        // `this` 指向该组件实例
                        this.count++
                    },
                    changeVal:function(event){
            this.selOption = event.target.value;
            alert("你选中了"+this.selOption);
        }
                }
            })

            const vm = app.mount('#app')
            document.write(vm.$data.count)
            document.write("<br>")
            
            vm.increment()
            document.write(vm.count) // => 6
        </script>
    </body>
</html>